<template>
  <div class="dialog-box">
    <div class="box-content" style="width:350px">
      <div class="content-header">
        <span>高级选项</span>
        <i class="el-icon-close" @click="$parent.advancedShow = false"></i>
      </div>
      <div class="content-body">
        <el-form label-width="120px">
          <wp-scrollbar :maxHeight="600" scrollbarColor="rgba(255,255,255,0.5)">
            <div class="form-item-box">
              <el-form-item label="几何压缩算法">
                <el-select v-model="lightweightConfig.compressOptions.mesh_compression" style="width:185px">
                  <el-option value="meshopt">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="使用线程">
                <el-input-number v-model="lightweightConfig.threads" :controls="true" :max="maxThread" :min="1"
                                 :step="1"
                                 controls-position="right" label="" style="width:185px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="精准压缩">
                <el-select v-model="lightweightConfig.compressOptions.mesh_compression_exactly" style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-item-box">
              <div class="item-title">
                最精细层级纹理压缩设置
              </div>
              <el-form-item label="是否压缩">
                <el-select
                    v-model="lightweightConfig.compressOptions.max_level_texture_compression_options.use_compression"
                    style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="使用UASTC格式">
                <el-select v-model="lightweightConfig.compressOptions.max_level_texture_compression_options.uastc"
                           style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="缩放比例">
                <el-input-number v-model="lightweightConfig.compressOptions.max_level_texture_compression_options.scale"
                                 :controls="true" :max="1" :min="0.1" :step="0.1" controls-position="right"
                                 style="width:185px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="质量等级">
                <el-input-number
                    v-model="lightweightConfig.compressOptions.max_level_texture_compression_options.qlevel"
                    :controls="true"
                    :max="255" :min="0" :step="1" controls-position="right" style="width:185px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="多级渐远纹理（Mipmap）">
                <el-select v-model="lightweightConfig.compressOptions.max_level_texture_compression_options.mipmap"
                           style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="form-item-box">
              <div class="item-title">
                其他层级纹理压缩设置
              </div>
              <el-form-item label="是否压缩">
                <el-select v-model="lightweightConfig.compressOptions.texture_compression_options.use_compression"
                           style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="使用UASTC格式">
                <el-select v-model="lightweightConfig.compressOptions.texture_compression_options.uastc"
                           style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="缩放比例">
                <el-input-number v-model="lightweightConfig.compressOptions.texture_compression_options.scale"
                                 :controls="true" :max="1" :min="0.1" :step="0.1" controls-position="right"
                                 style="width:185px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="质量等级">
                <el-input-number v-model="lightweightConfig.compressOptions.texture_compression_options.qlevel"
                                 :controls="true"
                                 :max="255" :min="0" :step="1" controls-position="right" style="width:185px">
                </el-input-number>
              </el-form-item>
              <el-form-item label="多级渐远纹理（Mipmap）">
                <el-select v-model="lightweightConfig.compressOptions.texture_compression_options.mipmap"
                           style="width:185px">
                  <el-option :value="true" label="是"></el-option>
                  <el-option :value="false" label="否"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </wp-scrollbar>
          <div class="form-item-box" style="border:none">
            <el-form-item class="submit-btn">
              <el-button type="primary" @click="clickConfirmBtn">确定</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: null
    },
    maxThread: {
      type: Number
    }
  },
  data() {
    return {};
  },
  computed: {
    lightweightConfig: {
      get() {
        return this.config
      },
      set(value) {
        this.$emit('update:config', value)
      }
    }
  },
  methods: {
    clickConfirmBtn() {
      this.$emit('close')
    }
  },
  created() {
  },
  mounted() {
  }
};
</script>
<style lang="less" scoped></style>